import QtQuick 1.1
import com.nokia.symbian 1.1
import CustomGraphics 1.0

Page {
    id: mainPage

    property alias imageSource: canvas.underneathImage
    property alias penColor: canvas.penColor
    property alias menu: optionsMenu
    property alias drawing: canvas.penEnabled

    function toggleDrawing(draw){
        if(draw){
            flickable.interactive = false;
        }else{
            flickable.interactive = true;
        }
        pinchArea.enabled = flickable.interactive
        canvas.penEnabled = !flickable.interactive
        textTimer.restart();
    }

    function undo(){
        canvas.undo();
    }

    SavePage{
        id: savePage        
        onSaveToFile: {
            canvas.save(filename);
        }
    }

    PenCapPage{
        id: penCapSettings
        onPenCapStyle: canvas.penCapStyle = capStyle
    }

    PenJoinPage{
        id: penJoinSettings
        onPenJoinStyle: canvas.penJoinStyle = joinStyle
    }

    DrawTypePage{
        id: drawTypePage
        onDrawType: canvas.drawType = type
    }

    Component.onCompleted: canvas.createEmpty(1024,768)

    Flickable{
        id: flickable
        anchors.fill: parent
        contentHeight: mainImage.sourceSize.height
        contentWidth: mainImage.sourceSize.width
        interactive: true

        PinchArea{
            id: pinchArea
            pinch.target: canvas
            enabled: flickable.interactive

            width: Math.max(flickable.contentWidth, flickable.width)
            height: Math.max(flickable.contentHeight, flickable.height)

            property real initialWidth
            property real initialHeight

            onPinchStarted: {
                initialWidth = flickable.contentWidth
                initialHeight = flickable.contentHeight
            }

            onPinchUpdated: {
                // adjust content pos due to drag
                flickable.contentX += pinch.previousCenter.x - pinch.center.x
                flickable.contentY += pinch.previousCenter.y - pinch.center.y

                // resize content
                flickable.resizeContent(initialWidth * pinch.scale, initialHeight * pinch.scale, pinch.center)
            }

            onPinchFinished: {
                // resize also drawing bitmap
                var setHeight = flickable.contentHeight;
                var setWidth = flickable.contentWidth;
                if(flickable.contentHeight>canvas.originalSourceSize.height)
                    setHeight = canvas.originalSourceSize.height;
                if(flickable.contentWidth>canvas.originalSourceSize.width)
                    setWidth = canvas.originalSourceSize.width;

                flickable.resizeContent(setWidth,setHeight,pinch.center);
                canvas.sourceSize = Qt.size(setWidth,setHeight);
                flickable.returnToBounds()
            }
        }

        ImageCanvas{
            id: canvas
            anchors.fill: parent
            penWidth: 10
            penEnabled: false
            penColor: "black"
            drawType: ImageCanvas.DrawPen

            onSourceSizeChanged:{
                flickable.contentHeight = sourceSize.height
                flickable.contentWidth = sourceSize.width
            }

            onSaveChanged: {
                if(!error){
                    dialogRoot.title = "Success"
                }else{
                    dialogRoot.title = "Save failed"
                }
                dialogRoot.open();
            }
        }        

        MouseArea{
            anchors.fill: parent
            onMousePositionChanged: {
                if(canvas.penEnabled){
                    canvas.penPosition = Qt.point(mouse.x,mouse.y);
                    mouse.accepted = true;
                }
            }
        }
    }

    Rectangle{
        id: statusRect
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.top: parent.top
        anchors.leftMargin: 10
        anchors.rightMargin: 10
        anchors.topMargin: 5
        radius: 10
        color: "steelblue"
        height: statusText.height+5
        opacity: 0

        Text{
            id: statusText
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            anchors.margins: 10
            color: "white"
            font.bold: true
            wrapMode: Text.WordWrap
            opacity: parent.opacity
        }

        transitions: Transition {
            NumberAnimation{ property: "opacity"; duration: 200; }
        }

        states:[
            State{
                name: "visible"
                PropertyChanges {
                    target: statusRect
                    opacity: 1
                }
            },
            State{
                name: "hidden"
                PropertyChanges {
                    target: statusRect
                    opacity: 0
                }
            }
        ]
    }

    Timer{
        id: textTimer
        interval: 2000

        triggeredOnStart: true

        onTriggered: {
            if(flickable.interactive){
                statusText.text = "Moving"
            }else{
                statusText.text = "Draw mode"
            }
            statusRect.state = "visible"
        }

        onRunningChanged: {
            if(!running)
                statusRect.state = "hidden"
        }
    }

    Menu {
        id: optionsMenu
        visualParent: mainPage
        MenuLayout {
            MenuItem { text: qsTr("New image");
                onClicked: canvas.createEmpty(1024,768);
            }
            MenuItem { text: qsTr("Open image");
                onClicked: pageStack.push(galleryPage);
            }
            MenuItem { text: qsTr("Color");
                onClicked: pageStack.push(colorChooser);
            }
            MenuItem { text: qsTr("Cap style");
                onClicked: penCapSettings.open();
            }
            MenuItem { text: qsTr("Cap join style");
                onClicked: penJoinSettings.open();
            }
            MenuItem { text: qsTr("Drawing type")
                onClicked: drawTypePage.open();
            }
            MenuItem { text: qsTr("Save");
                onClicked: pageStack.push(savePage,{saveName: canvas.freeFilename() });
            }
        }
    }

    Dialog {
        id: dialogRoot

        property alias title: titleText.text

        width: parent.width
        height: parent.height

        title: Text {
            id: titleText
            anchors.horizontalCenter: parent.horizontalCenter
            font.pointSize: 14
            color: "white"
        }

        buttons: ButtonRow{
            anchors.horizontalCenter: parent.horizontalCenter
            Button{text: qsTr("Close"); onClicked: dialogRoot.accept();}
        }
    }
}
